<? $this -> load -> view('header.php');?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>

<script>

 var map;
	$(document).ready(function() {
		var mapDiv = document.getElementById('map-canvas');
		 map = new google.maps.Map(mapDiv, {
			center : new google.maps.LatLng(15.083, 105.047),
			zoom : 11,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			streetViewControl: false,
			navigationControl: true,
			navigationControlOptions: {
			      style: google.maps.NavigationControlStyle.SMALL
			}
		});
		
		var bounds;
		$.get('<?echo base_url();?>index.php/land/getlandall', function(data) {				
				$.each($.parseJSON(data), function() {
					var land = this;
					var paths = new Array();
					for(i=0;i<land.polygon[0].length;i++){
						var loc = land.polygon[0][i].split(",")
			            var lat = parseFloat(loc[0])
			            var lng = parseFloat(loc[1])
						paths.push(new google.maps.LatLng(lat, lng));
					}
					 var shape = new google.maps.Polygon({
					    paths: paths,
					    strokeColor: land.landcolor.toString(),
					    strokeOpacity: 0.8,
					    strokeWeight: 2,
					    fillColor: land.landcolor.toString(),
					    fillOpacity: 0.35
					  });
				  
					google.maps.event.addListener(shape, 'click', function() {
						$("#user_infor").html("");
						$("#user_infor").append("<b>ชื่อที่ดิน:</b><br/>"+land.landname+"<br/>");
						$("#user_infor").append("<b>Latitude:</b><br/>"+land.Lat+"<br/>");
						$("#user_infor").append("<b>Logtitude:</b><br/>"+land.Lng+"<br/>");
						$("#user_infor").append("<b>ประเภทที่ดิน:</b><br/>"+land.landType+"<br/>");
						$("#user_infor").append("<b>ขนาดที่ดิน:</b><br/><br/>");
						$("#user_infor").append("<b><a href='#'>Read More</a></b>");
						
						 // var contentString = '<div >'
							 // +"Land Name:"+land.landname+"<br/>"
							 // +"Latitude:"+land.Lat+"<br/>"
							 // +"Logtitude:"+land.Lng
							 // +'<br/><a href="#">More Detial</a></div>';
							 // var infowindow = new google.maps.InfoWindow();
						// infowindow.close();
						// infowindow.setContent(contentString);
						// infowindow.open(map,shape);

					});
				
					  shape.setMap(map);
					
					
				});
  				
				

		});
	});
</script>
<div id="middle">
	<? $this -> load -> view('land/left_menu');?>
	<div id="center-column">
		 <div class="top-bar">
               
                    <h1>พื้นที่เพาะปลูก</h1>
                    
              </div>
		
		<div id="map-canvas" style="width: 100%; height: 100%"></div><br />

	</div>

<div id="right-column" >
		<strong class="h">Quick Info</strong>
		<div class="box" >
			<div id="user_infor"></div>
		</div>
	</div>	</div>
<? $this -> load -> view('footer');?>